<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:rich="http://richfaces.org/rich"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:a4j="http://richfaces.org/a4j"
      xmlns:f="http://java.sun.com/jsf/core">
    <body>

        <f:view>
            <ui:composition template="./main-template.xhtml">
                <ui:param name="titulo" value="Pagos Online" />
                <ui:define name="body">

                    <table width="500" border="0" cellpadding="0" cellspacing="0">
                        <tr>
                            <td height="50px">
                                <h:graphicImage url="/img/comment_accept.png" />
                            </td>
                            <td class="titulos_tramites">
                                <h:outputText value="Esta es la informacion de su pedido anotela para posteriores verificaciones."/>
                            </td>
                        </tr>
                        <tr bgcolor="#E2E2E2">
                            <td class="borde_tabla">
                                <h:outputText value="Referencia:"/>
                            </td>
                            <td class="borde_tabla">
                                <h:outputText value="#{BasketBean.compra.orden}"/>
                            </td>
                        </tr>
                        <tr>
                            <td class="borde_tabla">
                                <h:outputText value="Valor:"/>
                            </td>
                            <td class="borde_tabla">
                                <h:outputText value="$ #{BasketBean.compra.valorTotal}"/>
                            </td>
                        </tr>
                        <tr bgcolor="#E2E2E2">
                            <td class="borde_tabla">
                                <h:outputText value="Descripcion:"/>
                            </td>
                            <td class="borde_tabla">
                                <h:outputText styleClass="textospeq2" value="1 Libro(s) - Codigos Libros ("/>
                                <a4j:repeat id="detail" value="#{BasketBean.items}" var="detail">
                                    <h:outputText styleClass="textospeq2" value=" - #{detail.mueble.referencia}"/>
                                </a4j:repeat>
                                <h:outputText styleClass="textospeq2" value=")"/>
                            </td>
                        </tr>
                    </table>
                    <br/>
                    <br/>
                    <br/>
                    <br/>
                    <br/>
                    <br/>
                    <table width="500" border="0" cellpadding="0" cellspacing="0">
                        <tr>
                            <td class="titulos_tramites">
                                <h:outputText value="Seleccione la entidad con la que realizara su pago"/>
                            </td>
                        </tr>
                    </table>
                    <a4j:form>

                        <table width="500" border="0" cellpadding="0" cellspacing="0" class="borde_tabla">
                            <tr>
                                <td class="mapa4_oscuro_title" colspan="3">
                                    <h:outputText value="Con Tarjeta de Credito"/>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <a4j:commandButton id="idAmerican" action="#{BasketBean.establecerFormaPago}" image="/img/americanExpress.png">
                                        <f:param name="formaPago" value="AmericanExpress"/>
                                        <rich:componentControl for="confirmation1" attachTo="idAmerican" operation="show" event="onclick" disableDefault="true"/>
                                    </a4j:commandButton>
                                </td>
                                <td>
                                    <a4j:commandButton id="idMaster" action="#{BasketBean.establecerFormaPago}" image="/img/masterCard.png">
                                        <f:param name="formaPago" value="MasterCard"/>
                                        <rich:componentControl for="confirmation1" attachTo="idMaster" operation="show" event="onclick" disableDefault="true"/>
                                    </a4j:commandButton>
                                </td>
                                <td>
                                    <a4j:commandButton id="idVisa" action="#{BasketBean.establecerFormaPago}" image="/img/visa.png">
                                        <f:param name="formaPago" value="Visa"/>
                                        <rich:componentControl for="confirmation1" attachTo="idVisa" operation="show" event="onclick" disableDefault="true"/>
                                    </a4j:commandButton>
                                </td>
                            </tr>
                        </table>
                        <br/>
                        <table width="500" border="0" cellpadding="0" cellspacing="0" class="borde_tabla" align="center">
                            <tr>
                                <td class="mapa4_oscuro_title" colspan="2">
                                    <h:outputText value="Con su cuente corriente o de ahorros"/>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <a4j:commandButton id="idPse" action="#{BasketBean.establecerFormaPago}" image="/img/animacion_pse.png">
                                        <f:param name="formaPago" value="CuentaCorriente"/>
                                        <rich:componentControl for="confirmation2" attachTo="idPse" operation="show" event="onclick" disableDefault="true"/>
                                    </a4j:commandButton>
                                </td>
                                <td>
                                    <a4j:commandButton id="idPse1" action="#{BasketBean.establecerFormaPago}" image="/img/PSE.png">
                                        <f:param name="formaPago" value="PSE"/>
                                        <rich:componentControl for="confirmation2" attachTo="idPse1" operation="show" event="onclick" disableDefault="true"/>
                                    </a4j:commandButton>
                                </td>
                            </tr>
                        </table>
                    </a4j:form>
                    <br/>
                    <a4j:form>
                        <rich:modalPanel id="confirmation1" width="510" height="300">
                            <table width="500" border="1" bordercolor="#FFFFFF" cellpadding="0" cellspacing="0" align="center">
                                <tr>
                                    <td colspan="2" valign="top" class="testimonials">
                                        Esta transaccion se esta realizando a traves de un medio seguro.
                                        <br/>
                                        <br/>
                                        <br/>
                                    </td>
                                </tr>
                                <tr bgcolor="#F7F7F7">
                                    <td class="textocontenido2">
                                        Nombre y Apellidos (*):
                                    </td>
                                    <td>
                                        <h:inputText required="true" value="#{BasketBean.compra.cliente.nombre}" />
                                    </td>
                                </tr>
                                <tr bgcolor="#EBEBEB">
                                    <td class="textocontenido2">
                                        Numero de la Tarjeta (*):
                                    </td>
                                    <td valign="top">
                                        <h:inputText required="true" value="#{BasketBean.compra.numeroTarjeta}" />
                                    </td>
                                </tr>
                                <tr bgcolor="#F7F7F7">
                                    <td class="textocontenido2">
                                        Fecha de Expiracion (*):
                                    </td>
                                    <td>
                                        <rich:calendar required="true" id="date" value="#{BasketBean.compra.fechaExpiracion}">
                                            <a4j:support event="ondateselected" reRender="mainTable"/>
                                        </rich:calendar>
                                    </td>
                                </tr>
                                <tr bgcolor="#EBEBEB">
                                    <td class="textocontenido2">
                                        Cuotas (*):
                                    </td>
                                    <td>
                                        <rich:comboBox required="true" value="#{BasketBean.compra.cuotas}" defaultLabel="Seleccione..." >
                                            <f:selectItem itemValue="1"/>
                                            <f:selectItem itemValue="2"/>
                                            <f:selectItem itemValue="3"/>
                                            <f:selectItem itemValue="4"/>
                                            <f:selectItem itemValue="5"/>
                                            <f:selectItem itemValue="6"/>
                                            <f:selectItem itemValue="7"/>
                                            <f:selectItem itemValue="8"/>
                                            <f:selectItem itemValue="9"/>
                                            <f:selectItem itemValue="10"/>
                                        </rich:comboBox>
                                    </td>
                                </tr>
                                <tr bgcolor="#F7F7F7">
                                    <td class="textocontenido2">
                                        Documento de Identificacion (*):
                                    </td>
                                    <td>
                                        <h:inputText required="true" value="#{BasketBean.compra.cliente.documento}" />
                                    </td>
                                </tr>
                                <tr bgcolor="#EBEBEB">
                                    <td class="textocontenido2">
                                        Direccion Correspondencia (*):
                                    </td>
                                    <td>
                                        <h:inputText  required="true" value="#{BasketBean.compra.cliente.direccion}" />
                                    </td>
                                </tr>
                                <tr bgcolor="#F7F7F7">
                                    <td class="textocontenido2">
                                        Telefono Diurno (*):
                                    </td>
                                    <td>
                                        <h:inputText  required="true" value="#{BasketBean.compra.cliente.telefonoCelular}" />
                                    </td>
                                </tr>
                                <tr bgcolor="#EBEBEB">
                                    <td class="textocontenido2">
                                        Telefono Nocturno (*):
                                    </td>
                                    <td>
                                        <h:inputText required="true" value="#{BasketBean.compra.cliente.telefonoResidencia}" />
                                    </td>
                                </tr>
                                <tr bgcolor="#F7F7F7">
                                    <td class="textocontenido2">
                                        Ciudad (*):
                                    </td>
                                    <td>
                                        <h:inputText required="true" value="#{BasketBean.compra.cliente.ciudadResidencia.nombre}" />
                                    </td>
                                </tr>
                                <tr bgcolor="#EBEBEB">
                                    <td class="textocontenido2">
                                        Pais (*):
                                    </td>
                                    <td>
                                        <rich:comboBox required="true" value="#{BasketBean.compra.cliente.ciudadResidencia.departamento.pais.nombre}" defaultLabel="Seleccione el país" >
                                            <f:selectItems  value="#{ClientBean.paises}" />
                                        </rich:comboBox>
                                    </td>
                                </tr>
                                <tr>
                                    <td colspan="2" align="center">
                                        <a4j:commandButton action="#{BasketBean.completarPago}" value="Pagar" />
                                    </td>
                                </tr>
                            </table>
                        </rich:modalPanel>
                    </a4j:form>
                    <a4j:form>
                        <rich:modalPanel id="confirmation2" width="510" height="300">
                            <table width="100%" border="1" bordercolor="#FFFFFF" cellpadding="0" cellspacing="0" align="center">
                                <tr>
                                    <td align="center">
                                        Esta transaccion se esta realizando a traves de un medio seguro.
                                        <br/>
                                        <br/>
                                        <br/>
                                    </td>
                                </tr>
                                <tr>
                                    <td class="titulos_tramites" align="center">
                                        <h:outputText value="Banco los Alpes"/>
                                        <br/>
                                        <br/>
                                        <br/>
                                    </td>
                                </tr>
                                <tr>
                                    <td bgcolor="#F7F7F7" class="textocontenido2" align="center">
                                        <rich:progressBar value="100" enabled="100" id="progrs1" progressVar="progress">
                                            <h:outputText value="{progress}%"/>
                                        </rich:progressBar>
                                        <br/>
                                        <br/>
                                        <br/>
                                    </td>
                                </tr>
                                <tr>
                                    <td align="center">
                                        <h:outputText value="Transacción Exitosa"/>
                                        <br/>
                                        <br/>
                                        <br/>
                                    </td>
                                </tr>
                                <tr>
                                    <td  align="center">
                                        <a4j:commandButton action="#{BasketBean.completarPago}" value="Pagar" />
                                    </td>
                                </tr>
                            </table>
                        </rich:modalPanel>
                    </a4j:form>
                </ui:define>
            </ui:composition>
        </f:view>
    </body>
</html>
